<!DOCTYPE html>

<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta charset="${_response_encoding}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
       
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/backbone/underscore.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/backbone/backbone.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        
        <script id="residence-form-template" type="javascript/template">
			<form>	
				<label for="residence_name">Nombre de la residencia</label>
				<input type="text" id="residence_name" name="residence_name"></input>
				<div class="actions">
					<a name="submit">Submit</a>
				</div>
			</form>
		</script>
      	
    </head>
    <body>
       Residences page!!
       <div id="app">
       </div>
    </body>
          	<script type="text/javascript">
      		var Residence = Backbone.Model.extend({});
      		var Residences = Backbone.Collection.extend({
      			model: Residence,
      			url: '@{root.ResidenceController.list()}'
      		});
      		
      		var AppView = Backbone.View.extend({
      			el: $("#app"),
      			
      			template: 	_.template($("#residence-form-template").html()),
      			
      			events: {
      				"click a[name=submit]":		"submit"
      			},
      			
      			render: function() {
      				$(this.el).html(this.template({}));
      				return this;
      			},
      			
      			submit: function() {
      				this.collection.create({name: $("#residence_name").val()});
      			},
      		});
      		
      		var residences = new Residences();
      		var appView = new AppView({collection: residences});
      		appView.render();
      	</script>
</html>
